import { computed, defineComponent, reactive, Teleport, watch } from "vue";
import styles from "./SmartPaste.module.less";
import LIcon from "@/components/public/lIcon/lIcon";
import validateInstance from "@/libs/validate/validate";
export default defineComponent({
  emits: ['confirm'],
  setup(props, { expose, emit }) {
    const state = reactive({
      isShow: false,
      activeKey: '1',
      msg: '',
    })
    const msgArr2d = computed(() => {
      let arr: any[] = [];
      let arr2d: any[] = [];
      arr = state.msg.split('\n');
      arr.forEach(x => {
        arr2d.push(x.split(' '));
      })
      return arr2d;
    })
    const open = () => {
      state.isShow = true;
    }

    watch(() => state.isShow, (nv) => {
      if (!nv) {
        state.activeKey = '1';
        state.msg = '';
      }
    })

    const isDate = (e: string) => {
      let mDate: any = '';
      if (e.indexOf('-') > -1) {
        mDate = new Date(Number(e.split('-')[0]), Number(e.split('-')[1]), Number(e.split('-')[2]));
      } else if (e.indexOf('/') > -1) {
        mDate = new Date(Number(e.split('/')[0]), Number(e.split('/')[1]), Number(e.split('/')[2]));
      } else if (e.length === 8) {
        mDate = new Date(Number(e.slice(0, 4)), Number(e.slice(4, 6)), Number(e.slice(6, 8)));
      }
      return mDate && mDate != 'Invalid Date';
    }

    // 识别名单
    const identify = () => {
      let arr: any[] = [];
      msgArr2d.value.forEach(x => {
        //长度为2验证身份证
        if (x.length === 2 && validateInstance.test(x[0], 'Chinese') && validateInstance.test(x[1], 'idcard')) {
          arr.push({
            real_name: x[0],
            id_type: '111',
            id_no: x[1],
            sex: Number(x[1].slice(16, 17)) % 2 === 1 ? '男' : '女',
            birthday: x[1].slice(6, 10) + '-' + x[1].slice(10, 12) + '-' + x[1].slice(12, 14),
          })
        }
        //长度为4验证护照
        if (x.length === 4 && validateInstance.test(x[0], 'Chinese') && ['男', '女'].includes(x[1]) && isDate(x[3])) {
          let birthday = '';
          if (x[3].indexOf('-') > -1) {
            birthday = x[3].split('-')[0] + '-' + x[3].split('-')[1].padStart(2, 0) + '-' + x[3].split('-')[2].padStart(2, 0);
          } else if (x[3].indexOf('/') > -1) {
            birthday = x[3].split('/')[0] + '-' + x[3].split('/')[1].padStart(2, 0) + '-' + x[3].split('/')[2].padStart(2, 0);
          } else if (x[3].length === 8) {
            birthday = x[3].slice(0, 4) + '-' + x[3].slice(4, 6).padStart(2, 0) + '-' + x[3].slice(6, 8).padStart(2, 0);
          }
          arr.push({
            real_name: x[0],
            id_type: '护照',
            id_no: x[2],
            sex: x[1],
            birthday,
          })
        }
      })
      emit('confirm', arr);
      console.log(arr);
      state.isShow = false;
    }

    expose({
      open,
    })
    return () => (
      <div class={styles['smart-paste-floating']} v-show={state.isShow}>
        <div class={styles['smart-paste-card']}>
          <div class={styles['smart-paste-header']}>
            <span class={styles['title']}>将名单复制到下面文本框中</span>
            <div class={styles['delete-icon']} onClick={() => { state.isShow = false }}>
              <LIcon type="icon-delete-x" class={styles.icon} />
            </div>
          </div>
          <div class={styles['smart-paste-container']}>
            <div class={styles['smart-paste-content']}>
              <a-tabs class={styles['smart-paste-tabs']} v-model:activeKey={state.activeKey} type="card">
                <a-tab-pane key="1" tab="名单内容">
                  <div class={styles['tabs-content']}>
                    <a-textarea class={styles.textarea} v-model:value={state.msg} placeholder="请输入内容" />
                  </div>
                </a-tab-pane>
                <a-tab-pane key="2" tab="有问题，点我！">
                  <div class={styles['tabs-content']}>
                    <div class={styles['help']}>
                      <p>
                        规则: 一个客人一行，姓名和证件号使用空格隔开,如：
                      </p>
                      <p>
                        张三 310101198001015898
                      </p>
                      <p>
                        王二 男 G12346578 1980-1-1
                      </p>
                      <p>
                        身份证:只需要姓名和证件号即可,网站可以自动识别身份证中的出生日期和性别{/*,如果出现*/}
                      </p>
                      {/* <p>
                          不能识别,将证件类型改为它即可
                        </p> */}
                      {/* <p>
                          护照:目前识别大多数国家的护照,如果出现部分国家的无法识别,将证件类型改为其它即可
                        </p> */}
                      <p>
                        出生日期:目前可识别格式如:2026-06-25,
                      </p>
                    </div>
                  </div>
                </a-tab-pane>
              </a-tabs>
            </div>
            <div class={styles['smart-paste-footer']}>
              <div class={styles['footer-btn']} onClick={() => { identify() }}>识别名单</div>
              <div class={styles['footer-btn']} onClick={() => { state.isShow = false }}>关闭</div>
            </div>
          </div>
        </div>
      </div>
    )
  }
})